<template>
  <div class="flow-formDesign-container">
    <el-card shadow="hover">
      <!-- 表单设计器 -->
      <FcDesigner ref="designer" height="780px" :config="config">
        <template #handle>
          <el-button round size="small" type="primary" @click="handleSave">
            <el-icon><ele-Plus /></el-icon>
            保存
          </el-button>
        </template>
      </FcDesigner>
    </el-card>
    <ApiV1FlowFlowFormEdit
        ref="editRef"
        :statusOptions="flow_form_status"
        @setFormData="setFormData"
        @flowFormList="flowFormList"
        @close="close"
    ></ApiV1FlowFlowFormEdit>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import {getCurrentInstance, onMounted, ref} from "vue";
  import FcDesigner from '@form-create/designer'
  import ApiV1FlowFlowFormEdit from "/@/views/flow/flowForm/list/component/edit.vue";
  import {encodeConf, encodeFields, setConfAndFields} from "/@/utils/formCreate";
  import {getFlowForm} from "/@/api/flow/flowForm";
  import {FlowFormInfoData} from "/@/views/flow/flowForm/list/component/model";
  defineOptions({ name: 'apiV1FlowFlowFormDesign' })
  const {proxy} = <any>getCurrentInstance()
  // 字典选项数据
  const {
    flow_form_status,
  } = proxy.useDict(
      'flow_form_status',
  )
  const config = {
    //控制字段ID输入框能否输入
    fieldReadonly: false
  }
  /** 处理保存按钮 */
  const designer =ref()
  const editRef = ref()
  const route = useRoute();
  const formData = ref<FlowFormInfoData>()
  onMounted(()=>{
    if (route.query.id){
      let id = parseInt(route.query.id as string)
      getFlowForm(id).then((res:any)=>{
        const data = res.data;
        formData.value = data
        setConfAndFields(designer, data.conf, data.fields)
      })
    }
  })
  const handleSave = () => {
    if(formData.value){
      editRef.value.openDialog(formData.value)
    }else{
      editRef.value.openDialog()
    }
  }
  const setFormData = ()=>{
    let fields = encodeFields(designer) // 表单字段
    let conf = encodeConf(designer) // 表单配置
    editRef.value.setFormDesignData(fields,conf)
  }
  const close = ()=>{
    proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
  }
  const emit = defineEmits(['flowFormList'])
  const flowFormList = ()=>{
    emit('flowFormList')
  }
</script>
<style scoped lang="scss">

</style>
